<template>
  <a-modal
    :maskClosable="maskClosable"
    title="迁移代价详情"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="迁移代价评分">
        <span class="ant-form-text"> {{ model.totalScore + " 分" }} </span>
      </a-form-item>
      <a-form-item v-for="(d, i) in factorNames" :key="i" :label="d">
        <span class="ant-form-text"> {{ scores[i] + " 分" }} </span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  name: "DetailModal",
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      visible: false,
      confirmLoading: false,
      model: {},
      factorNames: [],
      scores: [],
      maskClosable: false,
    };
  },
  methods: {
    showModal(record) {
      this.model = Object.assign({}, record);
      this.factorNames = [];
      this.scores = [];
      if (record.factorNames && record.scores) {
        this.model.factorNames.split(",").forEach((f) => {
          this.factorNames.push(f);
        });
        this.model.scores.split(",").forEach((s) => {
          this.scores.push(s);
        });
      }
      this.visible = true;
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>
